<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>列表渲染</title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        v-for指令
            1：用于展示列表数据
            2：语法： v-for="(item,index) in xxx" :key="yyy"
            3:可遍历：数组，对象，字符串，指定次数
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>人员列表 遍历数组</h2>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}-{{p.age}}
            </li>
        </ul>

        <h2>汽车列表 遍历对象</h2>
        <ul>
            <li v-for="(value,key) in car" :key="key">
                {{key}}-{{value}}
            </li>
        </ul>

        <h2>遍历字符串</h2>
        <ul>
            <li v-for="(char,key) of str" :key="key">
                {{key}}-{{char}}
            </li>
        </ul>

        <h2>遍历指定次数</h2>
        <ul>
            <li v-for="(number,index) of 10" :key="index">
                {{index}}-{{number}}
            </li>
        </ul>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 vue在启动时生成生产提示    
        const vm = new Vue({
            el: '#root',
            data: {
                name: '徐亚远',
                persons:[
                    {id:"001",name:"张三",age:80},
                    {id:"002",name:"李四",age:81},
                    {id:"003",name:"王五",age:82},
                ],
                car:{
                    name:"奥迪",
                    price:700000,
                    color:"黑色"
                },
                str:"hello"
            },
        })
    </script>


</body>

</html>